import { Button, Card, Col, Form, Input, message, Radio, Row } from "antd";
import { useState } from "react";
import { useRef } from "react";
import { POST_PLAYER } from "../../api/player";

function PlayerAdd() {

  // 设置loading效果
  let [loading, setLoading] = useState(false)

  // 获取表单元素
  let addFrom = useRef(null);
  // from.current就是该元素的dom对象，然后就可以调用改对象上的方法
  // console.log(addFrom.current);

  // 提交表单
  let submit = async (values) => {
    try {
      setLoading(true);
      // console.log(values);
      let res = await POST_PLAYER(values);
      console.log("000", res);
      message.success(res.message)
      addFrom.current.resetFields();

    } catch (err) { }


    setLoading(false);
    // 重置表单数据 表单的方法resetFields 重置一组字段到 initialValues
  }
  return (
    <Card>
      <Row>
        <Col xl={{ span: 8, offset: 8 }} lg={{ span: 12, offset: 6 }} md={{ span: 16, offset: 4 }} sm={{ span: 20, offset: 2 }} xs={{ span: 24, offset: 0 }}>
          <Form onFinish={submit} ref={addFrom} initialValues={{ name: "", gender: "", age: "" }}>
            <Form.Item name="name" label="姓名">
              <Input placeholder="请输入姓名！"></Input>
            </Form.Item>
            <Form.Item name="gender" label="性别">
              <Radio.Group>
                <Radio value={0}>男</Radio>
                <Radio value={1}>女</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item name="age" label="年龄">
              <Input placeholder="请输入年龄！"></Input>
            </Form.Item>
            <Form.Item>
              <Button loading={loading} type="primary" htmlType="submit">提交</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </Card>

  );
}

export default PlayerAdd;